<template>
  <div class="preview">
    <topology preview="true" :data="data" />
    <div class="tools" v-if="showTools">
      <a-button type="primary" @click="onBack">
        <a-icon type="left" /> 返回
      </a-button>
      <div></div>
      <a-button type="primary" style="margin-right: 0" @click="onSizeWindow">
        <a-icon type="border" />
        适合窗口大小
      </a-button>
      <a-button type="primary" @click="onSizeOri">
        <a-icon type="fullscreen-exit" />
        实际大小
      </a-button>
      <a-button type="primary" @click="onAn">
        <a-icon type="fullscreen-exit" />
        动画
      </a-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Preview',
  data() {
    return {
      data: {},
      locked: 0,
      showTools: true,
    };
  },
  created() {
    //获取存储数据
    const data = sessionStorage.getItem('topologyData');
    if(data){
      this.data = JSON.parse(data);
    }else{
      //
    }

    this.showTools = !!this.$route.query.r;
  },
  methods: {
    onAn(){
      // console.log(window.topology.data.pens[0])
      // window.topology.data.pens[0].animatePlay = true

      window.topology.data.pens[0].initAnimate()
      window.topology.data.pens[0].startAnimate()
    },
    onSizeWindow() {
      window.topology.fitView(16);
    },

    onSizeOri() {
      window.topology.open(this.data);
    },

    onBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.preview {
  position: relative;
  height: 100vh;

  .tools {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    display: flex;
    & > div {
      flex-grow: 1;
    }

    button {
      margin: 12px 16px;
    }
  }
}
</style>

